<template>
	<view class = "shopCar">
		<view class="header">
			<image @tap = "backMine" src="../../../assets/images/arr-l.png" mode=""></image>
			<text>购物车</text>
		</view>
		<checkbox-group @change = "checkBoxChange">
			<view class="shoplist" v-for = "item in productList" :key = "item.id">
				<view class="left">
					<!-- <checkbox-group @change = "isChecked"> -->
						<label>
							<checkbox :value="item.id"  :checked="checkbox.includes(item.id)"/><text></text>
						</label>
					<!-- </checkbox-group> -->
					<!-- <checkbox v-model ="item.isCheck"></checkbox> -->
					
				</view>
				<view class="middle">
					<view class="imgs">
						<image :src="item.cover_img" ></image>
					</view>
					<view class="infos">
						<text>名称:{{ item.gname}}</text>
						<text>编号:{{ item.sku_code}}</text>
						<text>数量:{{ item.count}}</text>
					</view>
				</view>
				<view class="right">
					<view class="top">
						价格:￥{{ item.price }}
					</view>
					<view class="countnum">
						<!-- fx-number-box @change="bindChange"></fx-number-box> -->
						<view class="reduce">-</view>
						<view class="num">{{ item.count }}</view>
						<view class="add">+</view>
					</view>
					<view class="delCart" @tap="delCart">
						删除
					</view>
				</view>
			</view>
			</checkbox-group>
			<view class="footer">
				<view class="left">
					<checkbox-group @change="allChecked">
						<label>
							<checkbox value="0" :checked="checkbox.length == productList.length"/><text>全选</text>
						</label>
					</checkbox-group>
					<!-- <checkbox v-model = "allcheck"></checkbox> -->
					
				</view>
				<view class="total">
					合计:￥{{ totalPrice }}
				</view>
				<view class="cartpay" @tap="goPay">
					结算
				</view>
			</view>
	</view>
</template>

<script>
	import http from "@/utils/http.js"
	// import fxNumberBox from '@/components/fx-number-box/fx-number-box.vue';
	export default {
		data() {
			return {
				userId:'', //用户id
				isCheck:false, //用于反选
				productList:[], // 商品列表
				allcheck:'', // 全选
				checkbox:[], // 最终选中列表
			};
		},
		onLoad() {
			// uni.getStorageSync("leju-buycart");
			// console.log(uni.getStorageSync("leju-buycart"));
			this.userId = JSON.parse(uni.getStorageSync('token')).id;
			console.log(this.userId);
			this.initShopList();
		},
		computed:{
			// allcheck:{
			// 	get(){
			// 		return this.productList.every(e=>e.isCheck==true);
			// 	},
			// 	set(val){
			// 		this.productList.forEach(e=>e.isCheck=val);
			// 	}
			// },
			// totalPrice() {
			// 	var totalPrice = 0;
			// 	// this.checkbox  保存了所有选中的id
			// 	// 吧选中商品过滤出来   
			// 	var seleProductList= this.productList.filter(item=> this.checkbox.includes(item.id));
				
			// 	for (var i =0; i < seleProductList.length; i ++) {				
			// 			totalPrice += seleProductList[i].count * seleProductList[i].price;	
			// 	}
			// 	return totalPrice
					
			// }
			
			totalPrice() {
				var totalPrice = 0;
				// checkbox中包含了选中商品的id,
				var selectProductList = this.productList.filter(item => 
					this.checkbox.includes(item.id))
				console.log(selectProductList);
				for (var i =0; i< selectProductList.length; i++){
					totalPrice += selectProductList[i].count *selectProductList[i].price;
				}
				return totalPrice;
			}
		},
		methods:{
			// 删除
				delCart() {
					http.get("/api/leju/front/cart/delCart",{
						id:this.productList[0].id
					}).then(res => {
						console.log(res,"33333");
						if(res.data.code == "success"){
							uni.navigateBack({
								delta:0
							})
						}
					})
				},
			// 不要了
			// isChecked(e) {
			// 	console.log(e.detail,'111');
			// 	this.checkbox = e.detail.value;
			// },
			//反选
			checkBoxChange(e){
				console.log(e.detail,"22222");
				this.checkbox = e.detail.value;
			},
			// 全选
			allChecked(e) {
				console.log(e.detail);
				var value = e.detail.value;
				// 只要value的长度大于0,说明进行了全选
				if( value.length > 0 ) {
					// 让列表中的id存入最终选中列表checkbox
					this.productList.forEach( item => {
						this.checkbox.push(item.id)
					})
				}else{
					this.checkbox = [];
				}
 			},
			backMine(){
				uni.navigateBack({
					delta:1
				})
			},
			// 构建对象,将这个对象传给订单页面
			goPay() {
				var skuList = [];
				for (var i = 0; i < this.checkbox.length; i ++) {
					var id = this.checkbox[i];
					// 只要id相等,返回列表中那一项
					var sku = this.productList.find( item => item.id == id);
					// sku就是选中的那一项
					console.log("sku",sku);
					if(sku){
						skuList.push(sku);
					}
				}
				// 总价格 和 总数量
				var totalCount = 0;
				skuList.forEach( item => {
					// totalPrice += item.price,
					totalCount += item.count
				});	
				
				// 构建订单对象
				var orderListObj = {
					userId:this.userId,
					totalPrice:this.totalPrice,
					orderDetialList:skuList,
					totalCount:totalCount,
					freight:0,
				};
				// 将订单对象存入本地，然后跳转至待付款界面
				uni.setStorageSync("order_key",orderListObj);
				uni.navigateTo({
					url:'/pages/kind/notPay/notPay'
				})
				
				
			},
			// 商品列表
			initShopList() {
				http.get("/api/leju/front/cart/cartList",{
					userId:this.userId,
				}).then(res => {
					console.log("商品列表",res);
					this.productList = res.data.data;
					console.log(this.productList);
					// this.productList.forEach( item => {
					// 	item.isCheck = false;
						// 注意 vue不能检测后来追加的对象属性
						// #  https://cn.vuejs.org/v2/guide/reactivity.html
						// this.$set(item,'isCheck',false)
						
					// })
				})
			},
			// 步进器
			// bindChange(value) {
			// 	console.log(value);
			// 	// this.nums = value;
			// },
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background:wheat;
	}
	.shopCar{
		width:750rpx;
		background:wheat;
		padding:0.01rpx;
		.header{
			width:100%;
			height: 80rpx;
			background: #5D4E49;
			padding:0.1rpx;
			image{
				position:absolute;
				left:33rpx;
				top:28rpx;
				width:24px;
				height: 38rpx;
			}
			text{
				display:block;
				width:120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align:center;
				font-weight:bolder;
				color:white;
				margin:0 auto;
				margin-top:20rpx;
				font-size:40rpx;
			}
		}
		.shoplist{
			width:700rpx;
			height: 240rpx;
			margin:30rpx auto;
			background:pink;
			display:flex;
			justify-content: space-between;
			align-items:center;
			border-radius: 50rpx;
			.left{
				margin-left:10rpx;
			}
			.middle{
				display:flex;
				justify-content: space-around;
				align-items:center;
				.imgs{
					width:80rpx;
					height: 80rpx;
					margin-right:20rpx;
					image{
						width:80rpx;
						height: 80rpx;
					}
				}
				.infos{
					width:300rpx;
					// margin-left:20rpx;
					text{
						display:block;
						font-size:10rpx;
						margin-top:20rpx;
						
					}
				}
				
			}
			.right{
				.top{
					margin-left:10rpx;
					font-size: 12rpx;
					margin-bottom:50rpx;
				}
				.countnum{
					display:flex;
					justify-content: space-around;
					align-items:center;
					background:blue;
					color:white;
				},
				.delart {
					margin-top:15rpx;
					font-size:12rpx;
				}
			}
		}
		.footer{
			width:100%;
			height: 150rpx;
			position:fixed;
			left:0;
			bottom:0;
			background:white;
			display:flex;
			justify-content: space-between;
			align-items:center;
			.cartpay{
				width:200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align:center;
				font-size:30rpx;
				background:red;
				border-radius:20rpx;
			}
		}
	}
</style>
